<!--  -->
<template>
<div>
  <xl-header>购物车</xl-header>
		<div class="container" style="padding:60px 0 100px 0">
     <template v-if="status=='loaded'">

			<div class="cart-list" v-for="(item,index) in car_list" :key="item._id" >
				<div class="cart-hd"><input type="checkbox" v-model="item.check"><em>{{item.goods.name}}</em></div>
				<div class="cart-items">
					<dl><dt><img :src="item.goods.img"></dt>
						<dd>名称：{{item.goods.name}}</dd>
						<!-- <dd>简介：当你第一次见到C#时，千万不要傻傻地将它读作“C井号”...</dd> -->
						<dd>定价：￥<span class="price">{{item.goods.price}}</span></dd>
					</dl>
					<div class="icon-del del-item" @click="del(item._id,index)"><a href="javascript:void(0);"></a></div>
				</div>
				<div class="subtotal"><span class="total-price">小计：￥<em>{{item.goods.price*item.num}}</em></span><span class="count">
          <a href="javascript:void(0);" @click="minus(index)"  class="icon-minus minus"></a><input
						 type="number" name="" v-model="item.num"><a href="javascript:void(0);" @click="add(index)" class="icon-add add"></a></span></div>
			</div>
       
     </template>


    <xlLoading v-if="status=='loading'"></xlLoading>

    <xlempty v-if="status=='empty'"></xlempty>

    <div v-if="status=='nologin'">
      您还未登录,是否立即<router-link to="/login">登录</router-link>
    </div>


  	</div>
		<!--底部-->
		<footer class="cart-footer" v-if="status=='loaded'">
			<label><input type="checkbox"  v-model="allCheck" />全选</label>
			<em>总计：￥<span id="totPirce">{{totalPrice}}</span></em>
			<a href="#" id="pay">去结算</a>
		</footer>
		<!--模态框-->
		<div class="modals" v-show="modal">
			<div class="dialog">
				<h4>您确定要删除此商品吗？</h4>
				<span class="ok" @click="confirmDel">确定</span>
				<span class="cancel" @click="modal=false">取消</span>
			</div>
		</div>


     <xlFooter :act="2"></xlFooter>
</div>
 
</template>

<script>

import xlLoading from "@/components/xl-loading.vue";
import xlempty from "@/components/empty.vue";
export default{
  name:'car',
  data(){
    return{
         status:'loading',
         car_list:[],
         modal:false,
         del_active_id:''
    }
  },
  components:{
    xlLoading,
    xlempty
  },
  created(){
     this.get_cart_list()
  },
  computed:{
     allCheck:{
      //  every  循环 数组的每一项 如果每一次返回的结果都是true 那整体结果为true

         get(){
             return this.car_list.every(v=>v.check)
         },
         set(val){

           console.log(val)

           this.car_list.forEach(v=>{
             v.check = val
           })

         }
     },
     totalPrice(){

        let total = 0;
        // reduce  
        this.car_list.forEach(v=>{

          if(v.check){
            total+=v.num*v.goods.price
          }
        });

        return total

     }
  },
  methods:{

    get_cart_list(){
      let userid = localStorage.getItem('uid');
      if(!userid){
          this.status = 'nologin'
        return 
      }
      this.$http.post('/api/get_cart_list',{
        userid
      })
      .then(res=>{
          
          console.log(res)
          if(res.code==1){
            // map  对原数组进行遍历  根据他们的返回值组成新的数组
            //  映射  
              this.car_list = res.data.map(v=>{
                v.check = true;
                return v
              })

              console.log(this.car_list)

              if( this.car_list.length){
                   this.status = 'loaded'
              }else{
                this.status = 'empty'
              }
          }
      })
    },
    //  数量减少
    minus(index){
          let num = this.car_list[index].num-0
          if(num<=1){
            return 
          }
          this.car_list[index].num = num-1
    },
    // 增加
    add(index){
        let num = this.car_list[index].num-0;
        let stock = this.car_list[index].goods.stock;
        console.log(stock)
          if(num>=stock){
            return 
          }
          this.car_list[index].num = num+1 

    },
    del(_id,index){

      this.modal = true;
      this.del_active_id = _id

    },
    confirmDel(){

      console.log( this.del_active_id)

      // this.$http.post('/api/del_cart',{
      //   cart_id:this.del_active_id
      // })
      // .then(res=>{
      
      // })

    }
  }

}



</script>
<style lang='scss'>


.cart-footer{
	line-height: 55px;
	height: 55px;
	padding: 0 10px;
	background: #fff;
	width: 100%;
	max-width: 750px;
	position: fixed;
	bottom: 55px;
	left: 0;
	right: 0;
	margin: auto;
	border-top: 1px solid #ddd;
}

.cart-list{
	background: #fff;
	margin-bottom:10px ;
}
.cart-hd{
	padding:0 10px;
	line-height: 40px;
	border-bottom: 1px solid #E1E5EE;
}
.cart-hd input{
	width: 20px;
	height: 20px;
	-webkit-appearance: checkbox;
	border-radius: 2px;
	vertical-align: middle;
	border: 1px solid #afbbd9;
}
.cart-items{
	overflow: hidden;
	padding:5px 10px;
	position: relative;
	min-width: 150px;
}
.cart-items dt{
	width:30%;
	min-width: 20%;
	float: left;
	margin-right: 5px;
}
.cart-items dd{
	line-height: 1.5;
}
.cart-items dd:last-child{
	color: #c30000;
	margin-top: 10px;
}
.del-item{
	width: 20px;
	height: 20px;
	position: absolute;
	right: 20px;
	bottom: 10px;
}
.del-item a{
	display: block;
	height: 100%;
}
.icon-del{
	background-position: -256px -7px;
}
.subtotal{
	border-top: 1px solid #E1E5EE;
	padding:10px 10px;
}
.subtotal em{
	color: #c30000;
	line-height: 25px;
}
.count{
	float: right;
}
.count input{
	-webkit-appearance:pre;
	border: 1px solid #E1E5EE;
	height: 28px;
	padding: 4px;
	width: 30px;
	text-align: center;
	font-weight: bold;
	border-radius: 0px;
	vertical-align: middle;
}
.minus,.add{
	display: inline-block;
	width: 30px;
	text-align: center;
	vertical-align: middle;
}
.minus{
	border: 1px solid #E1E5EE;
	border-right: none;
	height: 28px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	background-position: -278px -3px;
}
.add{
	border: 1px solid #E1E5EE;
	border-left: none;
	height: 28px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	background-position: -310px -3px;
}
.cart-footer input{
	width: 20px;
	height: 20px;
	-webkit-appearance:checkbox;
	border-radius: 2px;
	vertical-align: middle;
	margin-right: 4px;
	border:1px solid #afbbd9;
}
.cart-footer em{
	margin-left: 10px;
	color: #C30000;
	font-size: 16px;
}
.cart-footer a{
	display: inline-block;
	padding:0 25px;
	background: #ff9800;
	float: right;
	margin-right: -10px;
	color: #fff;
	font-size: 16px;
}

/* 模态框 */
.modals{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background: rgba(10,10,10,0.8);
	// display: none;
}
.modals .dialog{
	width:85%;
	height: 120px;
	border-radius: 5px;
	background:rgba(0, 0, 0, 0.6);
	position: absolute;
	margin: auto;
	z-index: 100;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	color: #39435B;
}
.dialog h4{
	margin-top: 30px;
	color: #DDD;
}
.dialog span{
	margin: 0 10px;
	margin-top: 20px;
	border-radius: 3px;
	display: inline-block;
	padding: 4px 10px;
	background-color:#b4b4b4;
}

 
</style>